<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表导出 - 3D模型生产管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .export-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .export-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }
        .export-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .export-form {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .form-label {
            font-weight: 600;
            color: #495057;
        }
        .btn-export {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-export:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            transform: translateY(-1px);
        }
        .export-progress {
            display: none;
            margin-top: 1rem;
        }
        .export-status {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 10px;
            display: none;
        }
        .export-status.success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        .export-status.error {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .export-preview {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-top: 2rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .preview-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid #e9ecef;
        }
        .preview-item:last-child {
            border-bottom: none;
        }
        .preview-label {
            font-weight: 600;
            color: #495057;
        }
        .preview-value {
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-file-export me-2"></i>报表导出
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/admin">首页</a></li>
                            <li class="breadcrumb-item"><a href="/admin/reports">数据统计</a></li>
                            <li class="breadcrumb-item active">报表导出</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="export-form">
                    <h5 class="mb-4"><i class="fas fa-filter me-2"></i>导出设置</h5>
                    
                    <form id="exportForm">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="exportType" class="form-label">报表类型</label>
                                <select class="form-select" id="exportType" name="export_type">
                                    <option value="all">全部报表</option>
                                    <option value="orders">订单报表</option>
                                    <option value="users">用户报表</option>
                                    <option value="products">商品报表</option>
                                    <option value="production">生产报表</option>
                                    <option value="revenue">收入报表</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="dateRange" class="form-label">时间范围</label>
                                <select class="form-select" id="dateRange" name="date_range">
                                    <option value="7">最近7天</option>
                                    <option value="30" selected>最近30天</option>
                                    <option value="90">最近90天</option>
                                    <option value="365">最近一年</option>
                                    <option value="custom">自定义</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="row mb-3" id="customDateRange" style="display: none;">
                            <div class="col-md-6">
                                <label for="startDate" class="form-label">开始日期</label>
                                <input type="date" class="form-control" id="startDate" name="start_date">
                            </div>
                            <div class="col-md-6">
                                <label for="endDate" class="form-label">结束日期</label>
                                <input type="date" class="form-control" id="endDate" name="end_date">
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="fileFormat" class="form-label">文件格式</label>
                                <select class="form-select" id="fileFormat" name="file_format">
                                    <option value="excel" selected>Excel (.xlsx)</option>
                                    <option value="csv">CSV</option>
                                    <option value="pdf">PDF</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="includeCharts" class="form-label">包含图表</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="includeCharts" name="include_charts" checked>
                                    <label class="form-check-label" for="includeCharts">包含数据图表</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button type="submit" class="btn btn-export btn-lg">
                                <i class="fas fa-download me-2"></i>开始导出
                            </button>
                        </div>
                    </form>
                    
                    <div class="export-progress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 0%" id="progressBar">
                                <span id="progressText">0%</span>
                            </div>
                        </div>
                        <div class="text-center mt-2">
                            <small class="text-muted" id="progressStatus">准备导出...</small>
                        </div>
                    </div>
                    
                    <div class="export-status" id="exportStatus"></div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="export-card bg-light p-4 text-center">
                            <div class="export-icon text-primary">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <h5>订单报表</h5>
                            <p class="text-muted small mb-0">包含订单统计、收入分析、状态分布等数据</p>
                        </div>
                    </div>
                    
                    <div class="col-12 mb-3">
                        <div class="export-card bg-light p-4 text-center">
                            <div class="export-icon text-success">
                                <i class="fas fa-users"></i>
                            </div>
                            <h5>用户报表</h5>
                            <p class="text-muted small mb-0">包含用户增长、活跃度、类型分布等数据</p>
                        </div>
                    </div>
                    
                    <div class="col-12 mb-3">
                        <div class="export-card bg-light p-4 text-center">
                            <div class="export-icon text-warning">
                                <i class="fas fa-box"></i>
                            </div>
                            <h5>商品报表</h5>
                            <p class="text-muted small mb-0">包含商品统计、销售排行、库存分析等数据</p>
                        </div>
                    </div>
                    
                    <div class="col-12 mb-3">
                        <div class="export-card bg-light p-4 text-center">
                            <div class="export-icon text-info">
                                <i class="fas fa-industry"></i>
                            </div>
                            <h5>生产报表</h5>
                            <p class="text-muted small mb-0">包含生产任务、完成率、处理时间等数据</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="export-preview" id="exportPreview" style="display: none;">
            <h6 class="mb-3"><i class="fas fa-eye me-2"></i>导出预览</h6>
            <div id="previewContent"></div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 日期范围选择器
        document.getElementById('dateRange').addEventListener('change', function() {
            const customDateRange = document.getElementById('customDateRange');
            if (this.value === 'custom') {
                customDateRange.style.display = 'block';
                // 设置默认日期
                const today = new Date();
                const thirtyDaysAgo = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
                document.getElementById('startDate').value = thirtyDaysAgo.toISOString().split('T')[0];
                document.getElementById('endDate').value = today.toISOString().split('T')[0];
            } else {
                customDateRange.style.display = 'none';
            }
        });

        // 报表类型选择器
        document.getElementById('exportType').addEventListener('change', function() {
            updatePreview();
        });

        // 更新预览
        function updatePreview() {
            const exportType = document.getElementById('exportType').value;
            const dateRange = document.getElementById('dateRange').value;
            const preview = document.getElementById('exportPreview');
            const previewContent = document.getElementById('previewContent');
            
            // 根据选择的类型显示不同的预览内容
            let previewData = [];
            
            switch(exportType) {
                case 'orders':
                    previewData = [
                        { label: '总订单数', value: '计算中...' },
                        { label: '总收入', value: '¥ 计算中...' },
                        { label: '平均订单金额', value: '¥ 计算中...' },
                        { label: '订单完成率', value: '计算中...%' },
                        { label: '订单状态分布', value: '待处理、已确认、处理中、已发货、已送达、已取消' }
                    ];
                    break;
                case 'users':
                    previewData = [
                        { label: '总用户数', value: '计算中...' },
                        { label: '活跃用户数', value: '计算中...' },
                        { label: '月增长率', value: '计算中...%' },
                        { label: '平均订单数', value: '计算中...' },
                        { label: '用户类型分布', value: '新用户、普通用户、VIP用户' }
                    ];
                    break;
                case 'products':
                    previewData = [
                        { label: '总商品数', value: '计算中...' },
                        { label: '活跃商品数', value: '计算中...' },
                        { label: '平均价格', value: '¥ 计算中...' },
                        { label: '总销量', value: '计算中...' },
                        { label: '热销商品TOP10', value: '计算中...' }
                    ];
                    break;
                case 'production':
                    previewData = [
                        { label: '总生产任务', value: '计算中...' },
                        { label: '已完成任务', value: '计算中...' },
                        { label: '成功率', value: '计算中...%' },
                        { label: '平均处理时间', value: '计算中...小时' },
                        { label: '任务状态分布', value: '待处理、处理中、已完成、失败' }
                    ];
                    break;
                default:
                    previewData = [
                        { label: '包含数据', value: '订单、用户、商品、生产、收入等全部数据' },
                        { label: '文件格式', value: document.getElementById('fileFormat').value.toUpperCase() },
                        { label: '时间范围', value: dateRange === 'custom' ? '自定义' : `最近${dateRange}天` },
                        { label: '预计文件大小', value: '根据数据量计算' },
                        { label: '生成时间', value: '预计1-3分钟' }
                    ];
            }
            
            previewContent.innerHTML = previewData.map(item => `
                <div class="preview-item">
                    <span class="preview-label">${item.label}:</span>
                    <span class="preview-value">${item.value}</span>
                </div>
            `).join('');
            
            preview.style.display = 'block';
        }

        // 表单提交处理
        document.getElementById('exportForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const params = new URLSearchParams();
            
            // 构建查询参数
            for (let [key, value] of formData.entries()) {
                if (value) {
                    params.append(key, value);
                }
            }
            
            // 处理日期范围
            const dateRange = document.getElementById('dateRange').value;
            if (dateRange !== 'custom') {
                const days = parseInt(dateRange);
                const endDate = new Date();
                const startDate = new Date(endDate.getTime() - days * 24 * 60 * 60 * 1000);
                params.set('start_date', startDate.toISOString().split('T')[0]);
                params.set('end_date', endDate.toISOString().split('T')[0]);
            }
            
            // 显示进度条
            document.querySelector('.export-progress').style.display = 'block';
            document.getElementById('exportStatus').style.display = 'none';
            
            // 模拟进度
            let progress = 0;
            const progressBar = document.getElementById('progressBar');
            const progressText = document.getElementById('progressText');
            const progressStatus = document.getElementById('progressStatus');
            
            const progressInterval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 90) progress = 90;
                
                progressBar.style.width = progress + '%';
                progressText.textContent = Math.round(progress) + '%';
                
                if (progress < 30) {
                    progressStatus.textContent = '正在准备数据...';
                } else if (progress < 60) {
                    progressStatus.textContent = '正在生成报表...';
                } else if (progress < 90) {
                    progressStatus.textContent = '正在打包文件...';
                }
            }, 500);
            
            try {
                const response = await fetch(`/admin/reports/export?${params.toString()}`, {
                    method: 'GET'
                });
                
                clearInterval(progressInterval);
                
                if (response.ok) {
                    // 完成进度
                    progressBar.style.width = '100%';
                    progressText.textContent = '100%';
                    progressStatus.textContent = '导出完成！';
                    
                    // 下载文件
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = `报表_${new Date().toISOString().split('T')[0]}.xlsx`;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                    
                    // 显示成功状态
                    const status = document.getElementById('exportStatus');
                    status.className = 'export-status success';
                    status.innerHTML = '<i class="fas fa-check-circle me-2"></i>报表导出成功！文件已自动下载到您的设备。';
                    status.style.display = 'block';
                    
                } else {
                    throw new Error('导出失败');
                }
                
            } catch (error) {
                clearInterval(progressInterval);
                
                // 显示错误状态
                const status = document.getElementById('exportStatus');
                status.className = 'export-status error';
                status.innerHTML = '<i class="fas fa-exclamation-circle me-2"></i>报表导出失败，请稍后重试。';
                status.style.display = 'block';
                
                progressBar.style.width = '0%';
                progressText.textContent = '0%';
                progressStatus.textContent = '导出失败';
            }
            
            // 隐藏进度条
            setTimeout(() => {
                document.querySelector('.export-progress').style.display = 'none';
            }, 2000);
        });

        // 初始化预览
        updatePreview();
    </script>
</body>
</html>